<template>
    <div class="container">
  <div class="moving-box"></div>
</div>

</template>

<script setup name="Only">


</script>
<style lang="scss" scoped>
/* 视窗容器 */
.container {
  width: 800px;
  height: 160px;
  position: relative;
  border: 2px solid #000;
  overflow: hidden; /* 防止物体移出视窗外 */
}

/* 旋转运动的物体 */
.moving-box {
  width: 40px;
  height: 40px;
  background-color: red;
  position: absolute;
  bottom: 0; /* 初始位置在左下角 */
  left: 0;
  border-radius: 50%; /* 让物体看起来是圆形的 */
  
  /* 动画设置 */
  transform-origin: 400px 600px; /* 圆心在视窗底边中央 */
  animation: moveArc 5s linear infinite; /* 动画5秒，循环播放 */
}

/* 关键帧动画 */
@keyframes moveArc {
  0% {
    transform: rotate(0deg); /* 从左下角开始 */
  }
  100% {
    transform: rotate(180deg); /* 旋转180度到右下角 */
  }
}

</style>